<template>
  <div
    :style="{
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
    }"
    class="water"
    v-waterMarker="{
      text: '刘亚磊',
      textColor: 'red',
    }"
  >
    <div>
      <span>创建时间</span>&emsp;<el-date-picker
        v-model="value2"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始"
        :default-time="defaultTime1"
        end-placeholder="结束"
        :style="{ width: '200px' }"
      />
      <span :style="{ marginLeft: '16px' }">车次类型</span>&emsp;
      <el-select
        v-model="value3"
        class="m-2"
        placeholder="全部"
        size="default"
        :style="{ width: '100px' }"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="input2"
        class="w-50 m-2"
        placeholder="搜索ID/车次"
        :prefix-icon="Search"
        :style="{ width: '150px', marginLeft: '60px' }"
        @change="searchId"
      />
      <el-button @click="add">新建车次</el-button>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" class="table">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="trips" label="车次/类型">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.trips }}</span
            ><el-icon :style="{ marginLeft: '10px' }" v-copy="scope.row.trips"
              ><CopyDocument
            /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="车长" />
      <el-table-column prop="sum" label="总座位数" />
      <el-table-column prop="total" label="车厢人数" />
      <el-table-column prop="count" label="限乘人数" />
      <el-table-column prop="create_time" label="创建时间" width="180" />
      <el-table-column prop="state" label="状态" width="180">
        <template #default="scope">
          <el-switch v-model="scope.row.state" />
          <span
            v-if="scope.row.state == true"
            type="warning"
            :style="{ marginLeft: '10px' }"
            >启用</span
          >
          <span
            v-if="scope.row.state == false"
            type="warning"
            :style="{ marginLeft: '10px' }"
            >停用</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-icon :size="30" @click="handleEdit(scope.$index, scope.row)">
            <Edit />
          </el-icon>
          <el-icon :size="30" @click="delete1(scope.row.id)">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, prev, pager, next"
      :total="50"
      :default-current-page="page.currentPage"
      @current-change="handleCurrentChange"
      :style="{ marginLeft: '500px', marginTop: '50px' }"
    />
    <Dialog
      @closeTan="close"
      @confirm="delete2"
      :dialogVisible="dialogVisible"
    />
    <AddCar
      :dialogVisible1="dialogVisible1"
      @closeTan1="addclose"
      @confirm2="confirms"
    />
    <MyEditDia
      :openEdit="openEdit"
      @closeEdit="closeEdit"
      :item="item"
    ></MyEditDia>
  </div>
</template>

<script setup>
import axios from "axios";
import Dialog from "@/components/Dialog.vue";
import AddCar from "@/components/AddCar.vue";
import { Search, Edit } from "@element-plus/icons-vue";
import { defaultAxios } from "@/utils/request";
import { ref, onMounted } from "vue";
import MyEditDia from "@/components/MyEditDia.vue";
let dataList = ref([]);
const input2 = ref("");
const value3 = ref("");
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const options = [
  {
    value: "G71高铁",
    label: "G71高铁",
  },
];
const value2 = ref("");
// 点击编辑
const openEdit = ref(false);
const item = ref("");
let dialogVisible = ref(false);
let dialogVisible1 = ref(false);
const list = ref([]);
let index;
let page = ref({
  pageSize: 10,
  currentPage: 1,
  layout: "total,pager,prev, next",
});
let state = ref(false);
let value1 = ref(true);
onMounted(() => {
  defaultAxios.get("/trips").then((res) => {
    dataList.value = res.list.slice(0, 10);
    page.value.total = res.list.length;
    list.value = res.list;
  });
});

const close = (val) => {
  dialogVisible.value = val;
};
const addclose = (val) => {
  console.log(val);
  dialogVisible1.value = val;
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  if (val == 1) {
    dataList.value = list.value.slice((val - 1) * 10, val * 10);
  } else if (val == 2) {
    dataList.value = list.value.slice((val - 1) * 10, val * 10);
  }
};
const delete1 = (id) => {
  console.log(dialogVisible.value);
  index = list.value.findIndex((item, index) => {
    return item.id == id;
  });
  dialogVisible.value = true;
  console.log(dialogVisible.value);
};
const delete2 = (val) => {
  dialogVisible.value = val;
  dataList.value.splice(index, 1);
};
const searchId = () => {
  if (input2.value) {
    dataList.value = list.value.filter((item, i) => {
      return item.id == input2.value;
    });
  } else {
    dataList.value = list.value;
  }
};
const add = () => {
  dialogVisible1.value = true;
};
const confirms = (val) => {
  console.log(val);
  dialogVisible1.value = false;
};
const handleEdit = (index, row) => {
  console.log(index, row);
  item.value = row;
  openEdit.value = true;
};
const closeEdit = (data) => {
  openEdit.value = data;
};
</script>

<style>
.table {
  flex: 1;
}
.el-scrollbar__view {
  height: 100%;
}
.water {
  display: inline-block;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: repeat;
}
</style>
